<template>
  <div class="ssk">
    <el-container>
      <el-input
        style="width: 20%"
        placeholder="标题/关键字"
        v-model="parameter.content"
        clearable
      ></el-input>
      <el-button
        type="primary"
        size="mini"
        @click="onSubmit"
        icon="el-icon-search"
        round
        >查询</el-button
      >
    </el-container>
    <el-container>
      <el-button
        type="success"
        size="mini"
        icon="el-icon-circle-plus"
        @click.native="addTmeals()"
        round
        >添加</el-button
      >
    </el-container>
    <el-table
      style="width: 100%"
      align="center"
      :data="AllUser"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="标题" prop="ttitle" width="150">
      </el-table-column>
      <el-table-column label="关键字" prop="keywords" width="150">
      </el-table-column>
      <el-table-column label="适用人群" prop="tforpeople" width="150">
      </el-table-column>
      <el-table-column label="方案目标" prop="ttarget" width="150">
      </el-table-column>
      <el-table-column label="状态" prop="status" width="300">
        <template scope="scope">
          <span v-if="scope.row.status == 0">启用</span>
          <span v-if="scope.row.status == 1">禁止</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.status == 1"
            @click.native="update2(scope.row)"
            icon="el-icon-check"
          >
            启动
          </el-button>
          <el-button
            type="danger"
            size="mini"
            v-if="scope.row.status == 0"
            @click.native="update(scope.row)"
            icon="el-icon-delete"
          >
            禁用
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click.native="deleteRow(scope.row, scope.$index, AllUser)"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="parameter.page"
      :page-sizes="[2, 5, 10, 20]"
      :pager-count="9"
      background
      :page-size.sync="parameter.num"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <el-dialog title="修改制定方案" :visible.sync="dialogFormVisible2">
      <template>
        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick2">
          <el-tab-pane label="基本信息" name="first2">
            <div style="min-height: 350px">
              <div class="option">
                <div class="left">
                  <div class="title">模板标题</div>
                  <div class="content">
                    <el-input v-model="title"> </el-input>
                  </div>
                </div>
              </div>
              <div class="option">
                <div class="left">
                  <div class="title">关键字</div>
                  <div class="content">
                    <el-input v-model="keywords"> </el-input>
                  </div>
                </div>
              </div>
              <div class="option">
                <div class="left">
                  <div class="title">适应人群</div>
                  <div class="content">
                    <el-input v-model="adaptation"> </el-input>
                  </div>
                </div>
              </div>
              <div class="textarea">
                <div class="title">方案目标</div>
                <textarea v-model="texta"> </textarea>
              </div>
            </div>
            <div class="but">
              <el-button>取 消</el-button>
              <el-button type="primary" @click="save()">保存</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="饮食干预" name="third2">
            <el-container>
              <el-input
                style="width: 20%"
                placeholder="编号/名称"
                v-model="parameter2.content"
                clearable
              ></el-input>
              <el-button
                type="primary"
                size="mini"
                @click="onSubmitTMeals"
                icon="el-icon-search"
                round
                >查询</el-button
              >
            </el-container>
            <el-table
              style="width: 100%"
              align="center"
              :data="AllTMeals"
              ref="zttable"
              @selection-change="handleSelectionTMealsChange"
              :row-key="getRowKey"
            >
              <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
              >
              </el-table-column>
              <el-table-column label="编号" prop="code" width="120">
              </el-table-column>
              <el-table-column label="名称" prop="name" width="120">
              </el-table-column>
              <el-table-column label="类别" prop="tmealsType.name" width="120">
              </el-table-column>
              <el-table-column label="食品说明" prop="explain" width="120">
              </el-table-column>
            </el-table>
            <el-pagination
              :total="total1"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page.sync="parameter2.page"
              :page-sizes="[2, 5, 10]"
              :pager-count="9"
              background
              :page-size.sync="parameter2.num"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </el-tab-pane>

          <el-tab-pane label="运动干预" name="second2">
            <el-container>
              <el-input
                style="width: 20%"
                placeholder="编号/名称"
                v-model="parameter3.content"
                clearable
              ></el-input>
              <el-button
                type="primary"
                size="mini"
                @click="onSubmittMentality"
                icon="el-icon-search"
                round
                >查询</el-button
              >
            </el-container>
            <el-table
              style="width: 100%"
              align="center"
              :data="AllTSportsItem"
              ref="zttable2"
              :row-key="getRowKey"
              @selection-change="handleSelectionTSportsItemChange"
            >
              <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
              >
              </el-table-column>
              <el-table-column label="编号" prop="code" width="120">
              </el-table-column>
              <el-table-column label="名称" prop="name" width="120">
              </el-table-column>
              <el-table-column label="项目强度" prop="strength" width="120">
              </el-table-column>
              <el-table-column label="注意事项" prop="notes" width="120">
              </el-table-column>
            </el-table>
            <el-pagination
              :total="total2"
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page.sync="parameter3.page"
              :page-sizes="[2, 5, 10]"
              :pager-count="9"
              background
              :page-size.sync="parameter3.num"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
  data() {
    return {
      loading: true,
      activeName2: "first2",
      AllUser: [],
      parameter: {
        page: 1,
        num: 5,
        content: "",
      },
      texta: "",
      title: "",
      adaptation: "",
      keywords: "",
      total: 0,
      dialogFormVisible2: false,
      parameter2: {
        page: 1,
        num: 5,
        content: "",
      },
      parameter3: {
        page: 1,
        num: 5,
        content: "",
      },
      multipleSelection1: [],
      multipleSelection2: [],
      total1: 0,
      total2: 0,
      AllTSportsItem: [],
      input: "",
      AllTMeals: [],
    };
  },
  methods: {
    update(scope) {
      let id = scope.ttemplateid;
      axios
        .post("/api/lqHealth/ChaMangeIntervention", { tmerber: id })
        .then((res) => {
          if (res.data > 0) {
            this.$message({
              type: "error",
              message: "模板已经被使用请删除使用人员再删除模板",
            });
          } else {
            axios
              .post("/api/lqHealth/updateMangeByid", { tmerber: id })
              .then((res) => {
                if (res.data > 0) {
                  this.$message({
                    type: "success",
                    message: "禁用成功!",
                  });
                  this.load()
                }
              });
          }
        });
    },
    update2(scope) {
      let id = scope.ttemplateid;
      axios
        .post("/api/lqHealth/updateMangeByid2", { tmerber: id })
        .then((res) => {
          if (res.data > 0) {
            this.$message({
              type: "success",
              message: "开启成功!",
            });
            this.load()
          }
        });
    },
    save() {
      if (this.isOK()) {
        let aa = [];
        let bb = [];
        this.multipleSelection1.forEach((element) => {
          aa.push(element.code);
        });
        this.multipleSelection2.forEach((element) => {
          bb.push(element.code);
        });
        axios
          .post("/api/lqHealth/addTemplatemanage", {
            title: this.title,
            texta: this.texta,
            adaptation: this.adaptation,
            keywords: this.keywords,
            t_indeit_scode: JSON.stringify(aa),
            t_inmoving_code: JSON.stringify(bb),
          })
          .then((res) => {
            if (res.data > 0) {
              this.$message({
                type: "success",
                message: "添加模板成功!",
              });
              this.dialogFormVisible2 = false;
              this.load();
            }
          });
      }
    },
    isOK() {
      if (this.title == "") {
        this.$message({
          type: "error",
          message: "标题未填写!",
        });
        return false;
      }
      if (this.keywords == "") {
        this.$message({
          type: "error",
          message: "关键字未填写!",
        });
        return false;
      }
      if (this.texta == "") {
        this.$message({
          type: "error",
          message: "目标未填写!",
        });
        return false;
      }
      if (this.adaptation == "") {
        this.$message({
          type: "error",
          message: "适应人群未填写!",
        });
        return false;
      }
      if (this.multipleSelection1.length == 0) {
        this.$message({
          type: "error",
          message: "饮食内容未选择!",
        });
        return false;
      }
      if (this.multipleSelection2.length == 0) {
        this.$message({
          type: "error",
          message: "运动内容未选择!",
        });
        return false;
      }
      return true;
    },
    getRowKey(row) {
      return row.code;
    },
    getRowKey2(row) {
      return row.code;
    },
    deleteRow(scope, index, allList) {
      console.log(scope);
      let id = scope.ttemplateid;
      axios
        .post("/api/lqHealth/ChaMangeIntervention", { tmerber: id })
        .then((res) => {
          if (res.data > 0) {
            this.$message({
              type: "error",
              message: "模板已经被使用请删除使用人员再删除模板",
            });
          } else {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                allList.splice(index, 1);
                axios
                  .post("/api/lqHealth/DeleteMangeByid", { tmerber: id })
                  .then((res) => {
                    console.log(res.data);
                  });
                if (allList.length == 0) {
                  this.parameter.page += 1;
                  this.load();
                }
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除",
                });
              });
          }
        });
    },
    handleSelectionChange() {
      this.load();
    },
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    onSubmit() {
      this.load();
    },
    addTmeals() {
      this.dialogFormVisible2 = true;
    },
    onSubmitTMeals() {
      this.selectAllTMeals();
    },
    handleClick2(tab, event) {
      if (tab.name == "third2") {
        this.selectAllTMeals();
      } else if (tab.name == "second2") {
        this.selectAllTSportsItem();
      }
    },
    handleSelectionTMealsChange(val) {
      this.multipleSelection1 = val;
    },
    handleSelectionTSportsItemChange(val) {
      this.multipleSelection2 = val;
    },
    handleSizeChange1() {
      this.selectAllTMeals();
    },
    handleCurrentChange1() {
      this.selectAllTMeals();
    },
    handleSizeChange2() {
      this.selectAllTSportsItem();
    },
    handleCurrentChange2() {
      this.selectAllTSportsItem();
    },
    onSubmittMentality() {
      this.selectAllTSportsItem();
    },
    onSubmitTMeals() {
      this.selectAllTMeals();
    },
    //所有的饮食信息并胖断选择
    selectAllTMeals() {
      axios
        .post("/api/lqHealth/selectAllTMeals", this.parameter2)
        .then((res) => {
          this.AllTMeals = res.data.list;
          this.parameter2.page = res.data.pageNum;
          this.parameter2.num = res.data.pageSize;
          this.total1 = res.data.total;
          // if (this.value != "") {
          //   this.$nextTick(() => {
          //     for (let i = 0; i < this.AllTMeals.length; i++) {
          //       for (let j = 0; j < this.tdiettemplateselecteds.length; j++) {
          //         //两个数组做比对,选中的做勾选
          //         if (
          //           this.AllTMeals[i].code ==
          //           this.tdiettemplateselecteds[j].tdeitScode
          //         ) {
          //           this.$refs.zttable.toggleRowSelection(this.AllTMeals[i]);
          //         }
          //       }
          //     }
          //   });
          // } else {
          //   this.$nextTick(() => {
          //     for (let i = 0; i < this.AllTMeals.length; i++) {
          //       for (let j = 0; j < this.selectInqu.length; j++) {
          //         //两个数组做比对,选中的做勾选
          //         if (
          //           this.AllTMeals[i].code == this.selectInqu[j].tindeitScode
          //         ) {
          //           this.$refs.zttable.toggleRowSelection(this.AllTMeals[i]);
          //         }
          //       }
          //     }
          //   });
          // }
        });
    },
    //所有的运动信息并胖断选择
    selectAllTSportsItem() {
      axios
        .post("/api/lqHealth/selectAllTSportsItem", this.parameter3)
        .then((res) => {
          this.AllTSportsItem = res.data.list;
          this.parameter3.page = res.data.pageNum;
          this.parameter3.num = res.data.pageSize;
          this.total2 = res.data.total;
          // if (this.value != "") {
          //   this.$nextTick(() => {
          //     for (let i = 0; i < this.AllTSportsItem.length; i++) {
          //       for (
          //         let j = 0;
          //         j < this.tmovingtemplateselections.length;
          //         j++
          //       ) {
          //         //两个数组做比对,选中的做勾选
          //         if (
          //           this.AllTSportsItem[i].code ==
          //           this.tmovingtemplateselections[j].tmovingCode
          //         ) {
          //           this.$refs.zttable2.toggleRowSelection(
          //             this.AllTSportsItem[i]
          //           );
          //         }
          //       }
          //     }
          //   });
          // } else {
          //   this.$nextTick(() => {
          //     for (let i = 0; i < this.AllTSportsItem.length; i++) {
          //       for (let j = 0; j < this.selectInqu.length; j++) {
          //         //两个数组做比对,选中的做勾选
          //         if (
          //           this.AllTSportsItem[i].code ==
          //           this.selectInqu[j].tinmovingCode
          //         ) {
          //           this.$refs.zttable2.toggleRowSelection(
          //             this.AllTSportsItem[i]
          //           );
          //         }
          //       }
          //     }
          //   });
          // }
        });
    },
    //分页加载
    load() {
      axios
        .post("/api/lqHealth/selectAllTTemplatemanage", this.parameter)
        .then((res) => {
          console.log(res);
          this.AllUser = res.data.list;
          this.parameter.page = res.data.pageNum;
          this.parameter.num = res.data.pageSize;
          this.total = res.data.total;
          
        //加载样式
        setTimeout(() => {
          this.loading=false;
        }, 1000);
        });
    },
  },
  created() {
    this.load();
  },
});
</script>
<style scoped>
.rigth {
  width: 47%;
  height: 100vh;
  background-color: eee;
  text-align: center;
  box-shadow: 0 0 0.1rem;
}
.textarea {
  width: 100%;
  min-height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.textarea > div {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.textarea > textarea {
  width: calc(75% - 100px);
  min-height: 90px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.271);
  transition: 0.3s;
  outline: none;
  padding: 10px;
}
.textarea > textarea:focus {
  border-color: #409eff;
}
.option {
  margin-top: 10px;
  width: 100%;
  min-height: 50px;
  padding-left: 10px;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.option > div {
  width: 50%;
  height: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.option > div .title {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.option > div .content {
  width: calc(100% - 100px);

  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
}
.but {
  float: right;
  margin-right: 100px;
}
</style>